<template>
  <div style="height:100%">
    <div class="main">
      <img :src="'../../static/bg/'+random+'.jpg'" alt class="moveImg" />
    </div>
    <div class="loginIfm bigRadius shadow-parmary">
      <h2 class="margin-bom-spc text-center login-tit">LOGIN</h2>
      <el-select v-model="user.type" placeholder="选择用户" class="margin-bom-spc widthFill">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-input
        v-model="user.name"
        clearable
        placeholder="请输入账号"
        prefix-icon="el-icon-user"
        class="margin-bom-spc"
      ></el-input>
      <el-input
        v-model="user.pass"
        type="password"
        clearable
        show-password
        prefix-icon="el-icon-lock"
        placeholder="请输入密码"
        class="margin-bom-spc"
      ></el-input>
      <el-button type="primary" class="widthFill" @click="login()">登录</el-button>
    </div>
  </div>
</template>
<script>
import API from "../../common/js/api";
import ajax from "../../common/js/ajax";
export default {
  data() {
    return {
      options: [
        {
          value: 0,
          label: "超级管理员"
        },
        {
          value: 1,
          label: "普通管理员"
        },
        {
          value: 2,
          label: "用户"
        }
      ],
      user: {
        type: 0,
        name: "",
        pass: ""
      },
      random: ""
    };
  },
  methods: {
    login() {
      ajax(
        API.loginUrl,
        "post",
        this.user,
        d => {
          localStorage.setItem(
            "user",
            JSON.stringify({
              name: this.user.name,
              type: this.user.type
            })
          );
          this.$router.replace("/index");
        },
        err => {
          this.$message.error(err.data.info);
        }
      );
    }
  },
  watch: {},
  computed: {},
  mounted() {
    // 生成随机数
    this.random = Math.ceil(Math.random() * 15);
    // 服务端session已经开启
    ajax(
      API.findManage,
      "get",
      {},
      d => {
        alert("您已登录");
        this.$router.replace("/index");
      },
      err => {}
    );
  }
};
</script>
<style lang="stylus" scoped>
@import '../../common/css/index.styl';
.main{
  height:100%
  overflow hidden
  }
.loginIfm {
  position: absolute;
  width: 300px;
  height: 270px;
  padding: 20px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: rgba(255, 255, 255, 0.8);
}

img {
  width: 100%;
}

.moveImg {
  animation: move 22s infinite;
}

@keyframes move {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}
</style>